<style lang="less" scoped>
  .chestpain-map{
    width: 100%;
    height: 100%;
    position: relative;
    .map-area{
      width: 100%;
      height: 100%;
    }
  }
</style>

<template>
  <div class="chestpain-map">
    <div id="chestpainMap" class="map-area" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import base from '@/utils/config/base'
import { geoChiFengJson } from './geoChiFengJson'
import { geoXiangdongJSON } from './geoXiangdongJson'
import { geoZhuMaDianJson } from './geoZhuMaDianJson'
import { geoChangShaJson } from './geoChangShaJson'
import { geoLiuYangJson } from './geoLiuYangJson'
import { geoBengBuJson } from './geoBengBuJson'
import { geoTongLiaoJson } from './geoTongLiaoJson'
import { geoFoShanJson } from './geoFoShanJson'
import { geoPZHJson } from './geoPZHJson'
import { getZoneDiagnoses, getZoneDiagnosesStore, getZoneMpds } from '@/api/comprehensive/chestpainMap'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  watch: {
    'isStrock'() {
      this.getMap()
    }
  },
  data() {
    return {
      setInter: null,
      chiFengMapData: [{
        name: '红山区',
        stemi: 24,
        nstemi: 11,
        fdmss: 23
      }, {
        name: '元宝山区',
        stemi: 24,
        nstemi: 11,
        fdmss: 23
      }, {
        name: '松山区',
        stemi: 24,
        nstemi: 11,
        fdmss: 23
      }, {
        name: '阿鲁科尔沁旗',
        stemi: 24,
        nstemi: 11,
        fdmss: 23
      }, {
        name: '巴林左旗',
        stemi: 24,
        nstemi: 11,
        fdmss: 23
      }, {
        name: '巴林右旗',
        stemi: 24,
        nstemi: 11,
        fdmss: 23
      }, {
        name: '林西县',
        stemi: 24,
        nstemi: 11,
        fdmss: 23
      }, {
        name: '克什克腾旗',
        stemi: 24,
        nstemi: 11,
        fdmss: 23
      }, {
        name: '翁牛特旗',
        stemi: 24,
        nstemi: 11,
        fdmss: 23
      }, {
        name: '喀喇沁旗',
        stemi: 24,
        nstemi: 11,
        fdmss: 23
      }, {
        name: '宁城县',
        stemi: 24,
        nstemi: 11,
        fdmss: 23
      }, {
        name: '敖汉旗',
        stemi: 24,
        nstemi: 11,
        fdmss: 23
      }]
    }
  },
  mounted() {
    this.getMap()
    this.setInter = setInterval(() => {
      this.getMap()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    getMap() {
      // this.chiFengMapData = []
      let hospitalName = this.$store.getters.hospitalName
      let mapid = document.getElementById('chestpainMap')
      let myChart = echarts.init(mapid)
      // myChart.clear()
      let geoJsonList = null
      if (hospitalName == '湘东区人民医院') {
        geoJsonList = geoXiangdongJSON()
      } else if (hospitalName == '通辽市医院' || hospitalName == '赤峰学院附属医院') {
        geoJsonList = geoChiFengJson()
      } else if (hospitalName == '通辽市第二人民医院') {
        geoJsonList = geoTongLiaoJson()
      } else if (hospitalName == '蚌埠医学院第二附属医院') {
        geoJsonList = geoBengBuJson()
      } else if (hospitalName == '驻马店市中心医院') {
        geoJsonList = geoZhuMaDianJson()
      } else if (hospitalName == '浏阳市集里医院') {
        geoJsonList = geoLiuYangJson()
      } else if (hospitalName == '顺德中医院') {
        geoJsonList = geoFoShanJson()
      } else if (hospitalName == '攀枝花市中心医院') {
        geoJsonList = geoPZHJson()
      }
      if(geoJsonList){
        echarts.registerMap('MAP', geoJsonList)
      }
      window.addEventListener('resize', myChart.resize)
      if (this.isStrock == 'chestPain') {
        getZoneDiagnoses({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              res.data.forEach(el => {
                el.name = el.timeName
              })
              this.chiFengMapData = res.data
            }
            let option = {
              title: {
                text: this.$store.getters.hospitalName,
                left: 'center',
                textStyle: {
                  fontSize: 30,
                  color: '#00B4FF'
                }
              },
              tooltip: {
                trigger: 'item',
                backgroundColor: '#0C3688CC',
                formatter: function(a) {
                  if (a.data) {
                    return `地区：${a.name}
                    <br />STENI：${a['data']['countDiagSTEMI']}
                    <br />NSTEMI：${a['data']['countDiagNSTEMI']}
                    <br />UA：${a['data']['countDiagUA']}
                    <br />主动脉夹层：${a['data']['countDiagAD']}
                    <br />肺栓塞：${a['data']['countDiagPE']}
                    <br />非ACS心源性：${a['data']['countDiagNACSCCP']}
                    <br />其他非心源性：${a['data']['countDiagONCCP']}
                    <br />待查：${a['data']['countDiagPending']}
                    <br />其他：${a['data']['countDiagOther']}
                    <br />总共：${a['data']['sumDiag']}
                    `
                  }
                }
              },
              series: [{
                type: 'map',
                map: 'MAP',
                roam: true,
                label: {
                  show: true,
                  color: '#fff',
                  fontSize: 12
                },
                itemStyle: {
                  normal: {
                    areaColor: '#00146c',
                    borderColor: '#06e7fb',
                    borderWidth: 2
                  }
                },
                emphasis: {
                  label: {
                    color: '#fff'
                  },
                  itemStyle: {
                    areaColor: '#0764C1'
                  }
                },
                select: {
                  label: {
                    color: '#fff'
                  },
                  itemStyle: {
                    areaColor: '#0764C1'
                  }
                },
                // markPoint: {
                //   symbol: 'image://' + require('../../../images/hospital.png'),
                //   symbolSize: 30,
                //   silent: true,
                //   itemStyle: {
                //     color: '#E14346',
                //     borderColor: '#E14346'
                //   },
                //   label: {
                //     show: true,
                //     color: '#E14346',
                //     fontSize: 24,
                //     fontFamily: 'Source Han Sans CN',
                //     fontWeight: 'bold',
                //     formatter: ['赤峰学院附属医院'].join('\n'),
                //     verticalAlign: 'top',
                //     lineHeight: '56'
                //   },
                //   data: [{
                //     name: '赤峰学院附属医院',
                //     coord: [118.989834, 42.357482]
                //   }]
                // },
                data: this.chiFengMapData
              }]
            }
            myChart.setOption(option)
          }
        })
      } else if (this.isStrock == 'stroke') {
        getZoneDiagnosesStore({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              res.data.forEach(el => {
                el.name = el.timeName
              })
              this.chiFengMapData = res.data
            }
            let option = {
              title: {
                text: this.$store.getters.hospitalName,
                left: 'center',
                textStyle: {
                  fontSize: 30,
                  color: '#00B4FF'
                }
              },
              tooltip: {
                trigger: 'item',
                backgroundColor: '#0C3688CC',
                formatter: function(a) {
                  if (a.data) {
                    return `地区：${a.name}
                    <br />脑出血：${a['data']['countDiagNCX']}
                    <br />脑梗死：${a['data']['countDiagNGS']}
                    <br />动脉瘤：${a['data']['countDiagDML']}
                    <br />劲动脉狭窄或闭塞：${a['data']['countDiagJDMXJ']}
                    <br />总共：${a['data']['sumDiag']}
                    `
                  }
                }
              },
              series: [{
                type: 'map',
                map: 'MAP',
                roam: true,
                label: {
                  show: true,
                  color: '#fff',
                  fontSize: 12
                },
                itemStyle: {
                  normal: {
                    areaColor: '#00146c',
                    borderColor: '#06e7fb',
                    borderWidth: 2
                  }
                },
                emphasis: {
                  label: {
                    color: '#fff'
                  },
                  itemStyle: {
                    areaColor: '#0764C1'
                  }
                },
                select: {
                  label: {
                    color: '#fff'
                  },
                  itemStyle: {
                    areaColor: '#0764C1'
                  }
                },
                // markPoint: {
                //   symbol: 'image://' + require('../../../images/hospital.png'),
                //   symbolSize: 30,
                //   silent: true,
                //   itemStyle: {
                //     color: '#E14346',
                //     borderColor: '#E14346'
                //   },
                //   label: {
                //     show: true,
                //     color: '#E14346',
                //     fontSize: 24,
                //     fontFamily: 'Source Han Sans CN',
                //     fontWeight: 'bold',
                //     formatter: ['赤峰学院附属医院'].join('\n'),
                //     verticalAlign: 'top',
                //     lineHeight: '56'
                //   },
                //   data: [{
                //     name: '赤峰学院附属医院',
                //     coord: [118.989834, 42.357482]
                //   }]
                // },
                data: this.chiFengMapData
              }]
            }
            myChart.setOption(option)
          }
        })
      } else if (this.isStrock == 'trauma') {
        getZoneMpds({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              res.data.forEach(el => {
                el.name = el.timeName
              })
              this.chiFengMapData = res.data
            }
            let option = {
              title: {
                text: this.$store.getters.hospitalName,
                left: 'center',
                textStyle: {
                  fontSize: 30,
                  color: '#00B4FF'
                }
              },
              tooltip: {
                trigger: 'item',
                backgroundColor: '#0C3688CC',
                formatter: function(a) {
                  if (a.data) {
                    return `地区：${a.name}
                    <br />交通/运输事故：${a['data']['countMpds1']}
                    <br />高处坠落：${a['data']['countMpds2']}
                    <br />暴力袭击/侵犯：${a['data']['countMpds3']}
                    <br />动物咬伤/攻击：${a['data']['countMpds4']}
                    <br />烧伤/烫伤/爆炸伤：${a['data']['countMpds5']}
                    <br />锐器刺伤/枪伤/贯穿伤：${a['data']['countMpds6']}
                    <br />触电/雷击伤：${a['data']['countMpds7']}
                    <br />冬季运动损伤：${a['data']['countMpds8']}
                    <br />机械损伤：${a['data']['countMpds9']}
                    <br />其他创伤：${a['data']['countMpds10']}
                    <br />总共：${a['data']['sumMpds']}
                    `
                  }
                }
              },
              series: [{
                type: 'map',
                map: 'MAP',
                roam: true,
                label: {
                  show: true,
                  color: '#fff',
                  fontSize: 12
                },
                itemStyle: {
                  normal: {
                    areaColor: '#00146c',
                    borderColor: '#06e7fb',
                    borderWidth: 2
                  }
                },
                emphasis: {
                  label: {
                    color: '#fff'
                  },
                  itemStyle: {
                    areaColor: '#0764C1'
                  }
                },
                select: {
                  label: {
                    color: '#fff'
                  },
                  itemStyle: {
                    areaColor: '#0764C1'
                  }
                },
                // markPoint: {
                //   symbol: 'image://' + require('../../../images/hospital.png'),
                //   symbolSize: 30,
                //   silent: true,
                //   itemStyle: {
                //     color: '#E14346',
                //     borderColor: '#E14346'
                //   },
                //   label: {
                //     show: true,
                //     color: '#E14346',
                //     fontSize: 24,
                //     fontFamily: 'Source Han Sans CN',
                //     fontWeight: 'bold',
                //     formatter: ['赤峰学院附属医院'].join('\n'),
                //     verticalAlign: 'top',
                //     lineHeight: '56'
                //   },
                //   data: [{
                //     name: '赤峰学院附属医院',
                //     coord: [118.989834, 42.357482]
                //   }]
                // },
                data: this.chiFengMapData
              }]
            }
            myChart.setOption(option)
          }
        })
      }
      myChart.on('click', params => {
        console.log(params, 'params')
        console.log(geoJsonList.features, 'geoJsonList')
        if (geoJsonList.features && geoJsonList.features.length > 0) {
          let markGeo = geoJsonList.features.filter(item => {
            return item.properties.name == params.name
          })
          console.log(markGeo, 'markGeo')
        }
      })
    }
  }
}
</script>
